<template>
  <Frame>
    <h1 slot="contitle" class="title">工作室负责人</h1>
    <div slot="text" >
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="item in list2.grades" :key="item" :timestamp="item" style="font-size: 17px" placement="top">
            <el-card>
              <div class="row">
                <div class="col-md-12 fz20" style="font-size: 20px" v-for="item1 in list2.bannerMembers" v-if="item1.memberGrade===item&&item1.memberResponsibility==='总负责人'"><p style="float: left">{{item1.memberResponsibility}}： <a :href="'leader/details/'+item1.id">{{item1.memberName}}</a></p></div>
                <div class="col-md-4" v-for="item1 in list2.bannerMembers" v-if="item1.memberGrade===item"><p style="float: left" v-for="item0 in list2.responsibilities" v-if="item0!=='总负责人'&&item0===item1.memberResponsibility&&item0!=='无'">{{item0}}：<a :href="'leader/details/'+item1.id">{{item1.memberName}}</a></p> </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </Frame>
</template>

<script>
// import Frame from "../Frame";
const Frame = () => import('../Frame')
export default {
  name: "Leader",
  components: {
    Frame
  },
  data() {
    return {
      list2:[]
    }
  },
  created() {
    console.log(1111)
    this.$nextTick(function () {
    this.$axios({
      url: '/officialwebsite/memberFrontDesk/selectAll',
      method: 'get',
    }).then(res => {
      this.list2=res.obj
    })
    })
  }

}
</script>

<style lang="less" scoped>
@media screen and (max-width: 850px) {
  .row {
    .fz20 {
      font-size: 18px!important;
    }
    font-size: 14px;
  }
}
</style>
